<template>
	<view class="sqimg">
		<scroll-view class="left" scroll-y>
			<view @click="leftClickHandle(index,item.imgAbb)" :class="active ===index?'active':''" v-for="(item,index) in catgory"
			 :key="item.objectId">{{item.imgName}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view v-if="!flag" v-for="item in imgs" @click="previewImg(item.imgUrl)">
				<image :src="item.imgUrl"></image>
				<view>{{item.imgMsg}}</view>	
			</view>
			<view v-if="flag">暂无数据</view>
		</scroll-view>
	</view>
</template>

<script>
	import goodsList from '../../components/goodsList/goodsList.vue'
	import Bmob from '../../bmob/Bmob-2.2.4.min.js'
	export default {
		data() {
			return {
				catgory:[],
				active: 9,
				flag:true,
				imgs:[]
			}
		},
		methods: {
			getcatgory(tableName) {
				const query = Bmob.Query(tableName)
				query.find().then(res => {
					for (var item of res) {
						// console.log(item)
						this.catgory.push(item)
					}
				})
				this.leftClickHandle(0,'jjsh');
			},
			leftClickHandle(index, imgCategory) {
				this.active = index;
				const q = Bmob.Query('imgMessahe');
				q.equalTo("imgCategory","==",imgCategory)
				q.find().then(res => {
				    console.log(res,res.length)
					let imgsFromBmob = []
					if(res.length > 0){
						this.flag = false
						for(const item of res){
							imgsFromBmob.push(item)
						}
					}else{
						this.flag = true
					}
					this.imgs = imgsFromBmob
				});
			},
			// 图片预览功能
			previewImg(current){
				const urls = this.imgs.map(res=>{
					return res.imgUrl
				})
				uni.previewImage({
					current,
					urls,
				})
				
			}
		},

		onLoad() {
			this.getcatgory('categoryImg');
			// this.leftClickHandle(this.active, this.catgory[this.active]);
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.sqimg {
		height: 100%;
		display: flex;

		.left {
			width: 200rpx;
			height: 100%;
			border-left: 2px solid #eee;

			view {
				line-height: 60px;
				height: 60px;
				color: #333;
				text-align: center;
				font-size: 30rpx;
				border-top: 1px solid #eee;
			}

			.active {
				background: $my-uni;
				color: #fff;
			}
		}

		.right {
			height: 100%;
			width: 530rpx;
			margin: 8rpx 10rpx;
			image{
				height: 520rpx;
				width: 520rpx;
				border-radius:5px
			}
			view{
				text-align: center;
				font-size: 33rpx;
				color: #555555;
				line-height: 50rpx;
				border-bottom: 1px solid #eee;
			}
		}
	}
</style>
